<script setup lang="ts">
import { VolumeMountStatus } from "@/views/domain/kubeHud/api/k8s/types";

type Prop = {
  volumes?: VolumeMountStatus[];
};

const props = defineProps<Prop>();
</script>

<template>
  <div class="volume-wrapper">
    <el-table :data="props.volumes" table-layout="auto">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="mountPath" label="挂载路径" />
      <el-table-column prop="readonly" label="I/O">
        <template #default="{ row }">
          <el-tag v-if="row.readonly" type="info">只读</el-tag>
          <el-tag v-else type="success">读写</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.volume-wrapper {
  .el-table {
    border-radius: 12px;
    overflow: hidden;
    --el-table-header-bg-color: var(--el-color-primary-dark-1);
    --el-table-header-text-color: var(--el-border-color-lighter);
  }
}
</style>
